<script>
import { onBeforeUnmount} from 'vue'
import { useRoute,useRouter} from 'vue-router'
import {ref,onMounted} from "vue"
import { reactive, toRefs } from '@vue/runtime-core'
import { getJsonshopDetalis } from "../api/shopDetails.js";
import { getJsonshopEvaluate } from "../api/shopEvaluate.js";
import { useStore } from "../store/index";
    export default {
        setup() {
            let route = useRoute();
            let router=useRouter()
            let data = reactive({
                opstyle:{background: `linear-gradient(rgba(0, 0, 0, 0.205),rgba(0, 0, 0, 0.034))`},
                coo:{color:`#fff`},
                shopid:null,
                title:null,
                tip:null,
                newprice:null,
                oldprice:null,
                sale:null,
                place:null,
                free:null,
                imglist:null,
                url:null,
                minurl:null,
                min:false,
                num:0,
                // style:{},
                // opacity:0,
             })

            function getdata() {
                // console.log(route.query.shopid);
                data.shopid=route.query.shopid
                // console.log(data.shopid);
            }
             
             let shopList =ref(null);
             let evaluateList =ref(null);
             let store=useStore()
             data.num=store.shopnum

            // 监听页面滚动
            let scrolling=()=>{
                let scrollTop =window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                
                if(scrollTop >=44 && scrollTop <=312){
                    const opacitys = scrollTop / 312
                    console.log(opacitys);
                    data.opstyle={background: `linear-gradient(rgba(255, 255, 255, ${opacitys}),rgba(255, 255, 255, ${opacitys}))`}
                    data.coo={color:`#000`,opacity:opacitys}
                }else if(scrollTop<44){
                    const opacitys = scrollTop / 44
                    data.opstyle={background: `linear-gradient(rgba(0, 0, 0, 0.205),rgba(0, 0, 0, 0.034))`}
                    data.coo={color:`#fff`,opacity:1-opacitys}
                }else if(scrollTop>312){
                    data.opstyle={background: `linear-gradient(rgba(255, 255, 255, 1),rgba(255, 255, 255, 1))`}
                    data.coo={color:`#000`,opacity:`1`}
                }
                console.log(scrollTop);
                // console.log(data.opstyle);
                

            }
            
            onMounted(()=>{
                // 监听页面滚动事件
                // window.addEventListener("scroll", scrolling, true);
                window.onscroll = scrolling
            })
            onBeforeUnmount(()=>{
                // window.removeEventListener("scroll", scrolling);
                window.onscroll = null
            })
            
           

            onMounted(()=>{//获取ajax数据
                getJsonshopDetalis().then(datafun=>{
                    shopList.value=datafun.data.filter(item=>{
                       return item.shopid==data.shopid
                    })
                    shopList.value=shopList.value[0]
                    data.title=shopList.value.title
                    data.tip=shopList.value.tip
                    data.newprice=shopList.value.newprice
                    data.oldprice=shopList.value.oldprice
                    data.sale=shopList.value.sale
                    data.place=shopList.value.place
                    data.free=shopList.value.free
                    data.imglist=shopList.value.imglist
                    data.url=shopList.value.url
                    // console.log(data.url);
                })

                getJsonshopEvaluate().then(data=>{
                    evaluateList.value=data.data.splice(0,2)
                    // console.log(evaluateList.value);
                })
            })

            let go=()=>{
                router.go(-1)
            }
             

            // 加入购物车
            let addpurchase=()=>{
                data.minurl=data.url[0];
                data.min=true
                store.shopnum+=1
                
                let time=setTimeout(()=>{//动画效果执行完后，恢复默认min:false
                    data.min=false
                    data.minurl=null
                    data.num=store.shopnum

                    clearTimeout(time)
                },2000)

                if(store.shopcar.length != 0){//保存加购的商品
                    console.log(store.shopcar);
                   let index= store.shopcar.findIndex(item=>{
                    
                       return  item.shopid==data.shopid
                    })
                    console.log(index);
                        if(index!=-1){
                            store.shopcar[index].value+=1
                            console.log(true);
                        }else{
                            store.shopcar.push({
                                shopid:data.shopid,
                                url:data.minurl,
                                title:data.title,
                                newprice:data.newprice,
                                oldprice:data.oldprice,
                                value:1,
                                check:false,
                                free:data.free,
                                payment:"00",
                            })
                            console.log(false);
                        }
                    
                }else{
                    console.log(store.shopcar);
                    store.shopcar.push({
                        shopid:data.shopid,
                        url:data.minurl,
                        title:data.title,
                        newprice:data.newprice,
                        oldprice:data.oldprice,
                        value:1,
                        check:false,
                        free:data.free,
                        payment:"00",
                    })
                }
            }

            // 立即购买
            let nowbuy=()=>{

                if(store.immediatelybuy.length != 0){
                    store.immediatelybuy=[]
                    store.immediatelybuy.push({
                        shopid:data.shopid,
                        url:data.url[0],
                        title:data.title,
                        newprice:data.newprice,
                        oldprice:data.oldprice,
                        value:1,
                        check:false,
                        free:data.free,
                        payment:"00",
                    })
                }else{

                    store.immediatelybuy.push({
                        shopid:data.shopid,
                        url:data.url[0],
                        title:data.title,
                        newprice:data.newprice,
                        oldprice:data.oldprice,
                        value:1,
                        check:false,
                        free:data.free,
                        payment:"00",
                    })
                }

                router.push({
                    path:"/ConfirmOrder",
                    query:{id:'02'}
                })
            }

            // 更多评价
            let moreCommented=()=>{
                router.push({
                    path:"/moreComment",
                    query:{
                        shopid:data.shopid
                    }
                })
            }


            getdata()
            // getshopDetailFun()

            return {
                ...toRefs(data),
                shopList,
                evaluateList,
                getdata,
                go,
                addpurchase,
                nowbuy,
                moreCommented,
                // scrolling,
            }
        },
    }
</script>

<template>
    <div class="shopDetail">
        <div class="wrapper">
            <!-- 头部 -->
            <div class="header" :style="opstyle">
                <div @click="go" class="header_left icon_coo icon-a-ziyuan558" :style="coo"></div>
                <router-link :style="coo" to="/ShoppingCart" class="header_right icon_coo icon-gouwuche1" ><span v-show="num!=0">{{num}}</span></router-link>
            </div>

            <!-- 轮播图 -->
            <van-swipe class="my-swipe" indicator-color="white">
                <div v-for="(item,index) in url" :key="index">
                    <van-swipe-item>
                        <img :src="item" alt="">
                    </van-swipe-item>
                </div>
            </van-swipe>

            <div class="title">{{title}}</div>
            <div class="tip">{{tip}}</div>
            <div class="price">
                <div class="newprice">￥{{newprice}}</div>
                <div class="oldprice"><del>￥{{oldprice}}</del></div>
                <div class="free" v-if="free">包邮</div>
            </div>

            <div class="sale">
                <div class="sell">已售{{sale}}</div>
                <div class="place">{{place}}</div>
            </div>

            <p style="height:8px;background-color:#f5f5f5;"></p>

            <div class="evaluate_title">
                <div class="etL">评价晒单</div>
                <div  class="etR" @click="moreCommented">
                    更多<i class="icon_coo icon-qianjin"></i>
                </div>
            </div>
            <div class="evaluate">
                <ul>
                    <li v-for="(item,index) in evaluateList" :key="index">
                        <div class="eva_top">
                            <div class="eva_topleft">
                                <div class="img">
                                    <img :src="item.headportrait" alt="">
                                </div>
                                <div class="name">{{item.name}}</div>
                                <div class="rank">{{item.grade}}</div>
                            </div>
                            <div class="eva_topright">好评</div>
                        </div>
                        <div class="comment">{{item.comment}}</div>
                        <div class="eva_bottom">
                            <div class="eva_bottomimg" v-for="(e,ind) in item.url" :key="ind">
                                <img :src="e" alt="">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <p style="height:8px;background-color:#f5f5f5;"></p>

            <div class="parlour">店铺信息</div>
            <div class="parlour_main">
                <div class="parlour_img">
                    <img :src="require('../assets/img/yanguo.png')" alt="">
                    <div class="word">
                        <p>豆果严选</p>
                        <p>全部商品 83</p>
                    </div>
                </div>
                <div class="stroll">进店逛逛</div>

            </div>
            <div class="score">
                <ul>
                    <li>描述相符<span>5.0</span></li>
                    <li>服务态度<span>5.0</span></li>
                    <li>发货速度<span>5.0</span></li>
                </ul>
            </div>

            <p style="height:8px;background-color:#f5f5f5;"></p>
            <div class="picture">
                <div v-for="(item,index) in imglist" :key="index">
                    <img :src="item" alt="">
                </div>
            </div>

            <!-- 底部 -->
            <div class="tar">
                <div class="contact">
                    <i class="icon_coo icon-xiaoxi"></i>
                    <p>联系卖家</p>
                </div>
                <div class="contact">
                    <i class="icon_coo icon-4"></i>
                    <p>店铺</p>
                </div>
                <div class="purchase" @click="addpurchase">加入购物车</div>
                <div class="buy" @click="nowbuy">立即购买</div>
            </div>


            <!-- 加购时小图移动动画效果 -->
            <div :class="['min', min?'con':'']">
                <img :src="minurl" alt="">
            </div>
        </div>
    </div>
</template>



<style lang="scss" scoped>
.shopDetail{
    .wrapper{
        .header{
            // opacity: 0;
            // background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 44px;
            position: fixed;
            z-index: 1;
            width: 100%;
            background-image: linear-gradient(rgba(0, 0, 0, 0.205),rgba(0, 0, 0, 0.034));
            
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.034);
            .header_left{
                padding: 0 16px;
                color: #fff;
                font-size: 20px;
            }
            .header_right{
                padding: 0 16px;
                color: #fff;
                font-size: 20px;
                position: relative;
                span{
                    position: absolute;
                    top: -5px;
                    right: 12px;
                    font-size: 10px;
                    width: 15px;
                    height: 15px;
                    color: #fff;
                    text-align: center;
                    border-radius: 50%;
                    background-color: #de2e20;
                }
            }
        }
        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            // line-height: 150px;
            height: 355px;
            text-align: center;
            // background-color: #39a9ed;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .title{
            padding: 16px 16px 0 16px;
            font-weight: 600;
        }
        .tip{
            padding: 10px 16px 14px;
            color: #999;
            font-size: 11px;
        }
        .price{
            padding: 0px 16px 10px;
            display: flex;
            align-items: center;
            .newprice{
                font-size: 20px;
                font-weight: 600;
                color: #de2e20;
            }
            .oldprice{
                color: #999;
                font-size: 14px;
                padding: 0 8px;
            }
            .free{
                color: #de2e20;
                font-size: 14px;
                background-color: #f7dcda;
                padding: 3px;
                border-radius: 4px;
            }
        }
        .sale{
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #999;
            font-size: 10px;
            transform: scale(0.9);
        }
        .evaluate_title{
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .etL{
                font-weight: 600;
            }
            .etR{
                font-size: 14px;
                color: #999;
                i{
                    font-size: 12px;
                }
            }
        }
        .evaluate{
            ul{
                li{
                    padding: 0 16px 20px;
                    .eva_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .eva_topleft{
                            display: flex;
                            align-items: center;
                            .img{
                                width: 26px;
                                height: 26px;
                                img{
                                    border-radius: 50%;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .name{
                                font-size: 11px;
                                padding:0 4px 0 8px ;
                            }
                            .rank{
                                font-size: 10px;
                                transform: scale(0.8);
                                color: #c79e2d;
                                font-weight: 600;
                            }
                        }
                        .eva_topright{
                            color: #de2e20;
                            font-size: 12px;
                        }
                    }
                    .comment{
                        padding: 14px 0;
                    }
                    .eva_bottom{
                        display: flex;
                        // justify-content: space-between;
                        flex-wrap: wrap;
                        .eva_bottomimg{
                            // width: 25%;
                            margin-right: calc((351px - 82px * 4)/3);
                            img{
                                width: 82px;
                                height: 82px;
                                margin-bottom: 10px;
                            }
                            &:nth-child(4n+4){
                                margin-right: 0;
                            }
                        }
                    }
                }
            }
        }
        .parlour{
            font-weight: 600;
            padding: 50px 16px 25px;
        }
        .parlour_main{
            padding: 0 16px 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .parlour_img{
                display: flex;
                align-items: center;
                img{
                    width: 50px;
                    height: 50px;
                }
                .word{
                    padding-left: 10px;
                    p{
                        &:nth-child(1){
                            font-size: 14px;
                            padding-bottom: 14px;
                        }
                        &:nth-child(2){
                            color: #999;
                            font-size: 12px;
                        }
                    }
                }
            }
            .stroll{
                font-size: 14px;
                background-color: #f1c420;
                color: #333;
                padding: 8px;
                border-radius: 18px;
            }
        }
        .score{
            padding: 0 16px 14px;
            ul{
                display: flex;
                justify-content: space-between;
                align-items: center;
                li{
                    font-size: 12px;
                    span{
                        padding-left: 14px;
                    }
                }
            }
        }
        .picture{
            padding: 0 16px 50px;
            img{
                width: 100%;
            }
        }
        .tar{
            width: 100%;
            height: 50px;
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .contact{
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;
                color: #333;
                padding-left: 16px;
                i{
                    font-size: 20px;
                }
            }
            .purchase{
                background-color: #f1c420;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                width: 110px;
                text-align: center;
                border-radius: 15px;
                margin-left: 12px;
            }
            .buy{
                background-color: #f1c420;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                width: 110px;
                text-align: center;
                border-radius: 15px;
                margin-right: 16px;
            }
            
        }

        .min{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            border: 3px solid #fff;
            transition: all 1.5s cubic-bezier(0.75,-0.38, 0.44, 1.26) 0.5s;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .min.con{
            top: 3%;
            left: 94%;
            width: 15px;
            height: 15px;
            opacity: 0;
            animation: conshow 2s
        }
        @keyframes conshow {
            0%{
                opacity: 0;
            }
            80%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
    }
}
</style>